﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chromely</title>
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css">
    <script src="../Content/js/jquery.min.js"></script>
    <script src="../Content/js/tether.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function ajaxGetRun() {

            $('#ajaxGetResult tbody').html('');

            var http = new XMLHttpRequest();
            var url = "http://chromely.com/democontroller/movies/get";
            http.open("GET", url, true);

            http.onreadystatechange = function () {
                $('#ajaxGetResult tbody').empty();
                if (http.readyState == 4 && http.status == 200) {
                    var jsonData = JSON.parse(http.responseText);
                    for (var i = 0; i < jsonData.length; i++) {
                        var row = '<tr>';

                        row += '<td>' + jsonData[i].Id + '</td>';
                        row += '<td>' + jsonData[i].Title + '</td>';
                        row += '<td>' + jsonData[i].Year + '</td>';
                        row += '<td>' + jsonData[i].Votes + '</td>';
                        row += '<td>' + jsonData[i].Rating + '</td>';
                        row += '<td>' + jsonData[i].Date + '</td>';
                        row += '<td>' + jsonData[i].RestfulAssembly + '</td>';

                        row += '</tr>';
                        $('#ajaxGetResult tbody').append(row);
                    }
                }
            }
            http.send();
        }

        function ajaxPostRun() {

            $('#ajaxPostResult').html('');

            var moviesJson = [
                { Id: 1, Title: "The Shawshank Redemption", Year: 1994, Votes: 678790, Rating: 9.2 },
                { Id: 2, Title: "The Godfather", Year: 1972, votes: 511495, Rating: 9.2 },
                { Id: 3, Title: "The Godfather: Part II", Year: 1974, Votes: 319352, Rating: 9.0 },
                { Id: 4, Title: "The Good, the Bad and the Ugly", Year: 1966, Votes: 213030, Rating: 8.9 },
                { Id: 5, Title: "My Fair Lady", Year: 1964, Votes: 533848, Rating: 8.9 },
                { Id: 6, Title: "12 Angry Men", Year: 1957, Votes: 164558, Rating: 8.9 }
            ];

            var http = new XMLHttpRequest();
            var url = "http://chromely.com/democontroller/movies/post";
            http.open("POST", url, true);
            http.setRequestHeader("Content-type", "application/json");

            http.onreadystatechange = function () {
                if (http.readyState == 4 && http.status == 200) {
                    var jsonData = JSON.parse(http.responseText);
                    $('#ajaxPostResult').html(jsonData.Data);
                }
            }

            http.send(JSON.stringify(moviesJson));
        }
    </script>
</head>
<body>

<div class="container justify-content-center">
        <!-- -->
    <div class="form-group row justify-content-center col-12">
    <div class="row col-12">
        <h1>Ajax  Demo</h1>
    </div>

        <!-- Nav pills -->
    <div class="row col-12">
            <ul class="nav nav-pills" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#sectionI">Get</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#sectionJ">Post</a>
                    </li>
                </ul>
            
    </div>


    <div class="row col-12">
        <div class="row" style="height:25px;"></div>
            
    <!-- Tab panes -->
    <div class="tab-content">
            <div id="sectionI" class="container tab-pane active">
                <br>
                <div class="row">
                    <div class="col-12">
                        Route Path:&ensp;/democontroller/movies/get &ensp; <button id="buttonajaxGetRun" type="button" class="btn btn-primary btn-sm" onclick="ajaxGetRun()">Run</button>
                    </div>
                    <div style="height:100px;"></div>
                    <div class="col-12">
                        <div class='table-responsive'>
                            <table id="ajaxGetResult" class='table'>
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Title</th>
                                        <th>Year</th>
                                        <th>Votes</th>
                                        <th>Rating</th>
                                        <th>Date</th>
                                        <th>RestfulAssembly</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sectionJ" class="container tab-pane fade">
                <br>
                <div class="row">
                    <div class="col-12">
                        Route Path:&ensp;/democontroller/movies/post &ensp;<button id="buttonajaxPostRun" type="button" class="btn btn-primary btn-sm" onclick="ajaxPostRun()">Run</button>
                    </div>
                    <div style="height:100px;"></div>
                    <div class="col-12">
                        <div id="ajaxPostResult"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
            
</div>

</body>
</html>                            

















	
